<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#progess {
				height: 30px;
				width: 100%;
				background: gray;
			}
			
			#bar {
				width: 1%;
				height: 30px;
				background: green;
			}
		</style>
	</head>

	<body>
		<div id="progess">
			<div id="bar"></div>
			<br>
			<button id="btn">点击</button>
			<script>
				/*
				 * 计时器实现 每隔50毫秒执行一次函数
				 * 函数：width>100 清除计时器
				 *   否则 div的宽度增加
				 * 
				 * 定义计时器：每隔30毫米执行myfun函数
				 */
				
				var btn = document.getElementById('btn');
				var bar = document.getElementById('bar');
				//按钮的点击事件
				btn.onclick = function() {
					var timer = setInterval(myfun, 30);
					//定义宽度
					var width = 1;

					function myfun() {
						if(width >= 100) {
							clearInterval(timer);
						} else {
							width = width + 5;
							bar.style.width = width + '%';
						}

					}
				}
			</script>
		</div>
	</body>

</html>